<template>
	<view class="card-skeleton" :class="[size]">
		<view class="card-image"></view>
		<view class="card-info">
			<view class="card-title"></view>
			<view class="card-buy"></view>
		</view>
	</view>
</template>

<script>
export default {
	data: function() {
		return {};
	},
	props: {
		size: {
			type: String,
			default: 'normal'
		}
	},
	mounted: function() {
		this.initObserver();
	},
	methods: {
		initObserver: function() {
			var e = this;
			this.createIntersectionObserver()
				.relativeToViewport({
					bottom: 100,
					top: -100
				})
				.observe('.card-skeleton', function() {
					e.$emit('load');
				});
		}
	}
};
</script>

<style>
.card-skeleton {
	display: flex;
	padding-top: 24upx;
	padding-bottom: 24upx;
}
.card-skeleton.small{
	padding-bottom: 12upx;
}
.card-skeleton .card-image {
	width: 200upx;
	height: 200upx;
	background: #f8f8f8;
	border-radius: 10upx;
}
.card-skeleton.small .card-image {
	width: 140upx;
	height: 140upx;
}
.card-skeleton .card-info {
	margin: 5px 12px 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.card-skeleton .card-info .card-title {
	height: 17px;
	background: #f8f8f8;
}

.card-skeleton .card-info .card-buy {
	height: 24px;
	margin: 12px 0 0;
	background: #f8f8f8;
}
</style>
